<template>
  <div class="page-container">
    <div class="block-wrapper">
      <div class="label-sub-list" style="margin-bottom: 25px">
        <div class="label">pod实例：</div>
        <template v-if="podInstanceList.length > 6">
          <el-select
            v-model="curPodInstanceName"
            size="small"
            placeholder="请选择服务实例"
            class="filter-item"
            style="width: 350px"
            @change="onSelectInstance"
          >
            <el-option
              v-for="item in podInstanceList"
              :key="item.podName"
              :label="item.podName"
              :value="item.podName"
            />
          </el-select>
        </template>
        <template v-else>
          <div
            v-for="item in podInstanceList"
            :key="item.podName"
            :label="item.podName"
            :value="item.podName"
            class="l-sub-item"
            :class="{active: curPodInstance.podName === item.podName, dead: !item.alive}"
            @click="onChangeInstance(item)"
          >
            {{ item.podName + (!item.alive ? '(离线)' : '(在线)') }}
          </div>
        </template>
      </div>
      <div class="summary-charts">
        <el-row :gutter="12" class="el-row">
          <el-col :span="24">
            <div class="v-title">
              <el-tooltip content="显示Pod的cpu使用量" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
              Cpu Usage
            </div>
            <v-chart ref="cpuChart" class="v-chart" :options="cpuInfo" />
          </el-col>
        </el-row>
        <el-row :gutter="12" class="el-row">
          <el-col :span="24">
            <div class="v-title">
              <el-tooltip content="显示Pod的内存使用量" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
              Memory Usage
            </div>
            <v-chart ref="memChart" class="v-chart" :options="memInfo" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as APIS from '@/api/server'
import { mapGetters } from 'vuex'
import { makeEchart, loadingOptions } from '@/utils/echartDataTrans'
import ECharts from 'vue-echarts'

export default {
  name: 'DpServerMetricsAnalysis',
  components: {
    'v-chart': ECharts
  },
  props: {
    projectId: {
      type: Number,
      default: () => { return -1 }
    }
  },
  data() {
    return {
      cpuInfo: {},
      memInfo: {},
      curPodInstance: null,
      curPodInstanceName: '',
      podInstanceList: []
    }
  },
  computed: {
    ...mapGetters([
      'env',
      'dates'
    ]),
    podListParam() {
      return {
        projectId: this.projectId,
        env: this.env,
        minuteBegin: this.dates[0],
        minuteEnd: this.dates[1]
      }
    },
    charInfoParam() {
      return {
        podName: this.curPodInstanceName,
        projectId: this.projectId,
        env: this.env,
        minuteBegin: this.dates[0],
        minuteEnd: this.dates[1]
      }
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
    const _this = this
    this.$nextTick(() => {
      this.__resizeHandler = () => {
        if (_this.$refs.cpuChart) {
          _this.$refs.cpuChart.resize()
          _this.$refs.memChart.resize()
        }
      }
      window.addEventListener('resize', this.__resizeHandler)
    })

    this.initChartData()

    this.$bus.$on('global-datetime-pick', this.initChartData)
    this.$bus.$on('global-env-change', data => {
      this.initChartData()
    })
  },
  beforeDestroy() {
    this.$bus.$off('global-env-change')
    this.$bus.$off('global-datetime-pick')
  },
  methods: {
    clearChartData() {
      this.cpuInfo = {}
      this.memInfo = {}
    },
    initChartData() {
      this.clearChartData()
      this.getPodpodInstanceList(podInstanceList => {
        // 默认选中第一个
        if (podInstanceList.length > 0) {
          const firstItem = podInstanceList[0]
          this.onChangeInstance(firstItem)
        }
      })
    },
    onChangeInstance(item) {
      this.curPodInstance = item
      this.curPodInstanceName = item.podName
      this.fetchEchartData()
    },
    fetchEchartData() {
      this.getCpuInfo()
      this.getMemInfo()
    },
    getPodpodInstanceList(func) {
      APIS.queryK8sProjectPodStatusList(this.podListParam).then(res => {
        const podInstanceList = res
        this.podInstanceList = podInstanceList
        if (func !== undefined) {
          func(this.podInstanceList)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onSelectInstance(podName) {
      const len = this.podInstanceList.length
      for (let i = 0; i < len; i++) {
        const item = this.podInstanceList[i]
        if (item.podName === podName) {
          this.onChangeInstance(item)
          break
        }
      }
    },
    getCpuInfo() {
      const { cpuChart } = this.$refs
      cpuChart && cpuChart.showLoading(loadingOptions)
      APIS.queryPodCpuHistoryChartInfo(this.charInfoParam).then(res => {
        this.cpuInfo = makeEchart(res)
      }).finally(() => {
        cpuChart && cpuChart.hideLoading() // 接口返回后结束loading状态
      })
    },

    getMemInfo() {
      const { memChart } = this.$refs
      memChart && memChart.showLoading(loadingOptions)
      APIS.queryPodMemHistoryChartInfo(this.charInfoParam).then(res => {
        this.memInfo = makeEchart(res)
      }).finally(() => {
        memChart && memChart.hideLoading() // 接口返回后结束loading状态
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  ::v-deep .el-tabs__content {
    padding: 2px 2px !important;
  }

  .page-container {
    width: 100%;
    height: 100%;
    padding: 2px 2px 8px;
    box-sizing: border-box;

    .quickbar {
      height: 28px;
      background-color: #fff;
      padding: 10px;
      display: flex;
      line-height: 28px;
    }

    .block-wrapper {
      padding-top: 2px;
    }

    .label-sub-list {
      display: flex;
      background-color: #f5f7fa;
      margin-bottom: 2px;
    }

    .label {
      padding: 10px;
    }

    .l-item {
      padding: 20px;
      cursor: pointer;
      &.active {
        color: #fff;
        background-color: #0af;
      }

      &.dead {
        color: grey;
      }
    }

    .l-sub-item {
      padding: 10px;
      cursor: pointer;
      &.active {
        color: #fff;
        background-color: #0af;
      }
    }
  }
  .project-list {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .summary-charts {
    .v-chart {
      width: 100%;
    }
    .label-list {
      display: flex;
      background-color: #f5f7fa;
      margin-bottom: 20px;
    }
    .label {
      padding: 20px;
    }
    .l-item {
      padding: 20px;
      cursor: pointer;
      &.active {
        color: #fff;
        background-color: #0af;
      }
    }
  }
  .affair-content {
    display: flex;
    .affair-item {
      width: 240px;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 30px;
    }
    .item-inner {
      color: #0af;
      margin-bottom: 10px;
    }
    .charts-main {
      flex: 1;
    }
    >>> .el-tabs {
      margin-bottom: 0;
    }
    .el-row-chart {
      border-bottom: 1px solid #eee;
      margin-bottom: 50px;
    }
    .v-title {
      font-size: 16px;
      background-color: #f5f7fa;
      padding: 14px;
    }
    .tran-decom-data {
      width: 100%;
      cursor: pointer;
    }
    .item-inner-name {
      margin-top: 10px;
      .i-name {
        padding: 5px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        overflow: hidden;
      }
      .path {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .rate {
        flex-shrink: 0;
        margin-left: 6px;
      }
      .active {
        background-color: #0af;
        color: #fff;
      }
    }
  }
  .hd-title {
    font-weight: bold;
    margin: 10px 0 24px;
    font-size: 20px;
    background-color: #f5f7fa;
    padding: 10px;
  }
  .affair-search {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .btn-load-more {
    color: #1890ff;
    text-align: center;
    padding: 10px;
    cursor: pointer;
  }

  .panel-group {
    .card-panel-col {
      margin-bottom: 32px;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      padding: 0 20px;
      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 12px;
          margin-bottom: 20px;
        }

        .card-panel-num {
          font-size: 14px;
        }
      }
    }
  }
</style>
